<template>
<div class="container">
  <div class="help-center">
    <div class="help">
      <div class="help-nav">
        <h2 class="weight" style="padding-left: 23px">帮助中心</h2>
        <a-menu
            v-model:openKeys="openKeys"
            v-model:selectedKeys="selectedKeys"
            style="width: 256px"
            mode="inline"
            @click="handleClick"
        >
          <a-sub-menu key="sub1" @titleClick="titleClick">
            <template #title><h3 class="weight">新手攻略</h3></template>
            <a-menu-item key="0">可疑网站举报平台有哪些</a-menu-item>
            <a-menu-item key="1">如何导出检查链接图片和pdf</a-menu-item>
            <a-menu-item key="2">检查链接工具栏使用指南</a-menu-item>
            <a-menu-item key="3">如何分享检测链接思维导图</a-menu-item>
            <a-menu-item key="4">如何使用检测链接网页预览</a-menu-item>
            <a-menu-item key="5">如何使用检查链接追踪还原</a-menu-item>
            <a-menu-item key="6">如何实现注册/登录？</a-menu-item>

          </a-sub-menu>
          <a-sub-menu key="sub2" @titleClick="titleClick">
            <template #title><h3 class="weight">常见问题</h3></template>
            <a-menu-item key="7">如何联系检查链接官方</a-menu-item>
            <a-menu-item key="8">检查链接如何修改昵称</a-menu-item>
            <a-menu-item key="9">检查链接如何绑定微信/手机号</a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="sub3" @titleClick="titleClick">
            <template #title><h3 class="weight">使用技巧</h3></template>
            <a-menu-item key="10">短链接追踪还原机制原理</a-menu-item>
            <a-menu-item key="11">短链接：检查灰色链接平台</a-menu-item>
            <a-menu-item key="12">短链接网页预览可视化测试工具</a-menu-item>
            <a-menu-item key="13">域名备案查询工具推荐</a-menu-item>
            <a-menu-item key="14">短链接防红防封策略有哪些</a-menu-item>
            <a-menu-item key="15">短链接追踪还原原理解析</a-menu-item>
          </a-sub-menu>
        </a-menu>
      </div>

      <div class="help-content">
        <div class="help-iframe">
          <articles :activeKey="activeKey"/>
        </div>
      </div>
    </div>
  </div>
  <div class="put-msg">
    <p>Copyright©2022 Hefei Qiangzhen Technology Co., LTD. 合肥极强臻科技有限公司版权所有 </p>
    <p><a href="http://beian.miit.gov.cn/">网站备案号：19022901号-11</a><span>|</span><a
        href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=34010402702796">公安备案：34010402702796</a>
    </p>
  </div>
</div>
</template>

<script>
import {defineComponent,ref, toRefs, watch, reactive} from 'vue'

import articles from '@/components/publicity/articles'

export default defineComponent({
  components:{
    articles,
  },
  metaInfo: {
    meta: [
      {
        name: 'keywords',
        content: '检查链接,快速、高效、全面的检查灰色链接平台。'
      },
      {
        name: 'description',
        content: '一站式检查出灰色链接的全部信息，以思维导图形式追踪还原入口层、中间层、最终层的链接信息，让一切都清晰明了地展现在你面前。'
      },
      {
        name: 'viewport',
        content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no'
      }
    ]
  },
  setup() {
    const selectedKeys = ref(['0']);
    const openKeys = ref(['sub1']);
    const state = reactive({
      activeKey: '0',
    })


    const handleClick = e => {
      state.activeKey = e.key
      console.log(state.activeKey)
    };

    const titleClick = e => {
      console.log('titleClick22', e);
    };
  }
  })
</script>

<style lang="less" scoped>
.container{
  padding-top: 180px;
  background-color:#f0f2f5;
}
.weight{
  font-weight: bold;
}

.put-msg {
  background-color: #f6f7fb;
  padding: 20px 0;

  p {
    text-align: center;
    margin: 10px 0;
    font-weight: 400;
    color: #999999;
  }

  span {
    margin: 0 10px;
  }

  a {
    font-weight: 400;
    color: #999999;
  }
}
.help-center{
  width:100%;
  display: flex;
  justify-content:center;
  padding: 60px 0;
  background: -webkit-linear-gradient(#f6f7fb, #f6f7fb) no-repeat, #f0f2f5;
  background-size: 30.8% 100%;

  .help{
    width:65%;
    display:flex;
    justify-content:space-between;

    .help-iframe{


      #iframe{
        width:100%;
        height:1000px;

      }
    }

    .help-nav{
      margin-right: 40px;

      &:deep(.ant-menu){
        background-color:#f6f7fb;
      }
    }
    .help-content{
      width: 100%;
    }
  }


}

@media screen and (max-width: 1920px){
  //.help-center {
  //  background-size: 37.8% 100%;
  //}
}
@media screen and (min-width: 1551px) and (max-width: 1800px) {
  .help-center {
    background-size: 31.8% 100%;
  }
}

@media screen and (min-width: 1201px) and (max-width: 1550px) {
  .help-center {
    background-size: 34.1% 100%;
  }
}

@media screen and (max-width: 1200px) {
  //.help-nav{
  //  display:none;
  //}

  .help-center{
    padding:20px;

  }

  .help{
    width:100% !important;
    display:block !important;
  }

  &:deep(.ant-menu){
    width:100% !important;
  }

  .help-center .help .help-nav{
    margin-right: 0px;
    margin-bottom:50px !important;
  }

  .put-msg{
    padding: 20px;
  }

  .help-center{
    background: #f0f2f5;
  }
}
</style>
